<template>
  <div class="h_content_main">
    <div class="h_btn_box h_content_operate">
      <a-row type="flex" justify="start" v-show="menuChecked.type != '4'">
        <a-col>
          <mu-button color="primary" class="h_new" @click="carName('new')"
            >新建</mu-button
          >
        </a-col>
      </a-row>
    </div>
    <div class="h_screen_box h_content_search">
      <a-row type="flex" align="middle" justify="space-between">
        <a-col>
          <div class="h_tab">
            <a
              href="#"
              :class="menuChecked.state == '-1' ? 'h_active' : ''"
              @click="changeProjectState(-1)"
              >全部</a
            >
            <a
              href="#"
              :class="menuChecked.state == '1' ? 'h_active' : ''"
              @click="changeProjectState(1)"
              >进行中</a
            >
            <a
              href="#"
              :class="menuChecked.state == '2' ? 'h_active' : ''"
              @click="changeProjectState(2)"
              >已结束</a
            >
          </div>
        </a-col>
        <a-col>
          <mu-paper
            :z-depth="1"
            :class="['h_search', hSearchOn ? 'h_search-on' : '']"
            @click="hSearchOn = true"
            v-click-outside="closeSearch"
          >
            <a-input
              size="large"
              v-model="menuChecked.title"
              :allowClear="true"
              @pressEnter="onSearch"
              @change="searchInput"
            >
              <a-icon
                class="search-icon"
                slot="prefix"
                type="search"
                @click="onSearch"
              />
            </a-input>
          </mu-paper>
        </a-col>
      </a-row>
    </div>
    <div class="h_content_list">
      <div
        class="noData"
        v-if="
          noPro &&
            menuChecked.state === -1 &&
            menuChecked.title === '' &&
            menuChecked.page === 1
        "
      >
        <img src="../img/nodata1.png" />
        <div class="noDataTips">
          还没有学习项目哦，快点击“新建”创建一个吧
        </div>
      </div>
      <div class="noData" v-else-if="noPro">
        <img
          class="search-img"
          src="https://image.xuexiwangzhe.com/Fm4-9i-HYtQaFc1czGfCRo48L95I"
        />
        <div class="noDataTips">
          未搜索到对应的学习项目哦
        </div>
      </div>
      <div class="h_card_list" v-else>
        <a-row type="flex" justify="start">
          <template v-for="(item, index) in aitems">
            <a-col :key="index" class="falls">
              <ICard
                :item="item"
                @refresh="getProject"
                :groupTree="treeData"
              ></ICard>
            </a-col>
            <!-- <a-col
                  :key="index"
                  :span="7"
                  class="falls"
                  v-if="aitems.length % 3 > 0 && index === aitems.length - 1"
                ></a-col> -->
          </template>
        </a-row>
        <a-row type="flex" justify="center" v-if="isPagination">
          <template>
            <a-pagination
              simple
              :total="listTotal"
              :current="menuChecked.page"
              @change="pagination"
            />
          </template>
        </a-row>
      </div>
    </div>
    <!--新建项目 start-->
    <!-- <a-modal
      v-model="cardName.isShow"
      width="540px"
      :closable="false"
      :footer="null"
      :title="null"
    >
      <div class="card_name_header">
        新建项目
      </div>
      <div class="inputBox">
        <input type="text" class="input" v-model="newPro.title" />
      </div>
      <div class="car_name_footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="createSubmit">
          确认
        </a-button>
      </div>
    </a-modal> -->

    <mu-dialog
      title="新建项目"
      width="540"
      :open.sync="cardName.isShow"
      :overlay-close="false"
    >
      <mu-form ref="newProjectSubmitForm" :model="newPro">
        <mu-form-item prop="title" :rules="projectNameRules">
          <mu-text-field
            v-model="newPro.title"
            label="项目名称"
            label-float
            prop="title"
            style="width:100%;"
          ></mu-text-field>
        </mu-form-item>
        <div class="new-project-timeselect-box">
          <mu-form-item prop="startTime" :rules="startTimeRules">
            <mu-date-input
              v-model="newPro.startTime"
              label="开始时间"
              type="dateTime"
              label-float
              value-format="YYYY-MM-DD HH:mm:ss"
              prop="startTime"
              class="select-item"
              style="margin-right:20px;"
            ></mu-date-input>
          </mu-form-item>
          <mu-form-item prop="endTime" :rules="endTimeRules">
            <mu-date-input
              v-model="newPro.endTime"
              type="dateTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              label="结束时间"
              label-float
              prop="endTime"
              class="select-item"
            ></mu-date-input>
          </mu-form-item>
        </div>
      </mu-form>
      <mu-button
        class="mu-button-cancel"
        slot="actions"
        round
        flat
        @click="handleCancel"
        >取消</mu-button
      >
      <mu-button
        class="mu-button-submit"
        slot="actions"
        round
        flat
        color="primary"
        @click="createSubmit"
        >下一步</mu-button
      >
    </mu-dialog>
    <!--新建项目 end-->
  </div>
</template>

<script>
import ICard from "../components/i-card";
import { mapState } from "vuex";
export default {
  data() {
    return {
      noPro: true,
      hSearchOn: false,
      listTotal: 9,
      menuChecked: {
        state: "-1",
        title: "",
        page: 1,
        size: 9,
        projectCategoryId: "",
      },
      cardName: {
        title: "",
        isShow: false,
        inputName: "",
      },
      aitems: [],
      treeData: [],
      newPro: { title: "", startTime: "", endTime: "", type: 0 },
      projectNameRules: [
        { validate: (val) => !!val, message: "必须填写项目名称" },
      ],
      startTimeRules: [
        { validate: (val) => !!val, message: "必须选择开始时间" },
      ],
      endTimeRules: [{ validate: (val) => !!val, message: "必须选择结束时间" }],
    };
  },
  watch: {
    "$store.state.proType": {
      deep: true,
      handler(newVal, oldVal) {
        this.menuChecked.page = 1;
        this.menuChecked.projectCategoryId = "";
        this.getProject();
      },
    },
  },
  computed: {
    isPagination() {
      if (this.listTotal / this.menuChecked.size > 1) {
        return true;
      } else {
        return false;
      }
    },
    ...mapState(["proType"]),
  },
  components: {
    ICard,
  },
  created() {
    this.getProject();
  },
  methods: {
    closeSearch() {
      this.hSearchOn = false;
    },
    //状态选择
    changeProjectState(state) {
      this.menuChecked.state = state;
      this.getProject();
    },
    //查询项目
    getProject() {
      const url = "/project/list";
      const _this = this;
      _this.menuChecked.type = _this.proType[0];
      const parms = { params: _this.menuChecked };
      _this.$axios.get(url, parms).then((res) => {
        if (res.projectVoPage == null) {
          _this.noPro = true;
          _this.aitems = [];
        } else {
          _this.noPro = false;
          _this.aitems = res.projectVoPage.content;
          _this.listTotal = res.projectVoPage.totalElements;
          this.$nextTick(() => {
            const resultList = document.getElementsByClassName(
              "mu-menu-activator"
            );
            if (resultList) {
              const arrayResultList = [...resultList];
              arrayResultList.forEach((item) => {
                item.onclick = (e) => {
                  e.stopPropagation();
                };
              });
            }
          });
        }
        sessionStorage.setItem(
          "menuChecked",
          JSON.stringify(_this.menuChecked)
        );
        this.$store.commit("setProType", _this.proType);
      });
    },
    searchInput() {
      if (this.menuChecked.title === "") {
        this.onSearch();
      }
    },
    //创建项目
    carName(cardTitle) {
      var _this = this;
      _this.cardName.isShow = true;
    },
    handleCancel(e) {
      // console.log(e);
      this.cardName.isShow = false;
      this.newPro.title = "";
      this.newPro.type = "0";
    },
    createSubmit() {
      this.$refs.newProjectSubmitForm.validate().then((result) => {
        if (!result) return;
        const url = "/project/create";
        const _this = this;
        _this.newPro.type = _this.menuChecked.type;
        const parms = _this.newPro;
        _this.$axios.post(url, parms).then((res) => {
          if (res.success) {
            _this.$message.success("创建成功");
            //将分页切换到1；
            _this.menuChecked.page = 1;
            _this.handleCancel();
            _this.getProject();
          } else {
            _this.$message.error(res.msg);
          }
        });
      });
    },
    //分页
    pagination(page) {
      console.log(page);
      this.menuChecked.page = page;
      console.log(this.menuChecked);
      this.getProject();
    },
    onSearch() {
      this.getProject();
    },
  },
};
</script>

<style lang="less">
.h_content_main {
  .h_btn_box {
    padding-left: 13px;
    padding-right: 13px;
    clear: both;

    .h_new {
      width: 100px;
      height: 40px;
      border-radius: 5px;
      box-shadow: none;
      background-color: #376bfb;
    }
  }

  .h_screen_box {
    /*height: 30px;*/
    padding: 20px 13px;
    clear: both;
    overflow: hidden;
    box-sizing: border-box;

    .h_tab {
      /*float: left;*/
      line-height: 30px;

      & a {
        display: inline-block;
        /*padding:0px 20px;*/
        margin-right: 30px;
        color: #9fa2a8;
        text-decoration: none;

        &:hover,
        &.h_active {
          color: #404040;
          font-weight: 500;
          text-decoration: none;
        }

        &:last-child {
          margin-right: 0px;
        }
      }
    }

    .h_search {
      width: 220px;
      border-radius: 20px;
      box-shadow: 0 1px 6px 0px rgba(14, 23, 38, 0.05);

      input {
        &:focus {
          box-shadow: 0 1px 6px 0px rgba(14, 23, 38, 0.05);
        }
        border: none;
        border-radius: 20px;
      }
    }

    .h_search-on {
      .search-icon {
        color: #3366ff;
      }
    }
  }

  .falls {
    padding-bottom: 20px;
    width: 266px;
  }
}

.h_content_operate,
.h_content_search,
.h_content_list {
  width: 798px;
  margin: 0 auto;
}

@media screen and (min-width: 1370px) {
  .h_content_operate,
  .h_content_search,
  .h_content_list {
    width: 1064px;
  }
}

.new-project-timeselect-box {
  display: flex;
  align-items: center;
  margin-top: -20px;

  .select-item {
    width: 150px;
  }
}

.h_card_list {
  clear: both;
  overflow: hidden;

  .list {
    &:after {
      content: "";
    }
  }
}
</style>
